<template>
    <fieldset>
        <legend>{{ name }}</legend>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>产品名称:{{ item.title }}</b>
                -----
                <b>产品数量:{{ item.count }}</b>
                -----
                <b>单价:{{ item.price }}</b>
                -----
                <button @click="remove(item)">移出购物车</button>
            </li>
        </ul>
        <h1>
            总价:
            <span style="color:red">{{ total }}</span>
        </h1>
    </fieldset>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex"
//mapState('模块名称',['属性名'])
export default {
    computed: {
        ...mapState('cart', ['name', 'carts']),
        ...mapGetters('cart', ['total'])
    },
    mounted() {
        // this.$store.commit('cart/LOG')
        this.LOG()
    },
    methods: {
        ...mapMutations('cart', ['LOG']),
        ...mapActions('cart', ['REMOVE_CART']),
        remove(item) {
            this.REMOVE_CART(item)
        }
    }
}
</script>